$(function(){
	var myChart0 = echarts.init(document.getElementById('main'));
	 
    // 指定图表的配置项和数据
    var option0 = {
    	color:['#800080'],//图例颜色  ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
        title: {
            text: '第一个 ECharts 实例'//标题
        },
        tooltip: {},
        legend: {
            data:['销量'],
            textStyle:{
            	color:'black',//图例文字
            }
        },
        xAxis: {//横坐标
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},//纵坐标
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart0.setOption(option0);
    
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));

    myChart1.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
    
    
  //初始化ehcharts实例
    var myChart2=echarts.init(document.getElementById("main2"));
    //指定图表的配置项和数据
    var option2={
        //标题
        title:{
          text:'生鲜销量统计'
        },
        /*//工具箱
        //保存图片
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },*/
        //图例-每一条数据的名字叫销量
        legend:{
            data:['销量']
        },
        //x轴
        xAxis:{
            data:["苹果","橘子","橙子","香蕉","菠萝","榴莲"]
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis:{},
        //数据-data是最终要显示的数据
        series:[{
            name:'销量',
            type:'line',
            data:[40,20,35,60,55,10]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart2.setOption(option2);
    
    
    
    var myChart3 = echarts.init(document.getElementById('main3'));
	 
    // 指定图表的配置项和数据
    var option3 = {
    	color:['#800080'],//图例颜色  ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
        title: {
            text: '第一个 ECharts 实例'//标题
        },
        tooltip: {},
        legend: {
            data:['销量'],
            textStyle:{
            	color:'black',//图例文字
            }
        },
        xAxis: {//横坐标
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},//纵坐标
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option3);
    
    // 基于准备好的dom，初始化echarts实例
    var myChart4 = echarts.init(document.getElementById('main4'));

    myChart4.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
    
    
  //初始化ehcharts实例
    var myChart5=echarts.init(document.getElementById("main5"));
    //指定图表的配置项和数据
    var option5={
        //标题
        title:{
          text:'生鲜销量统计'
        },
        /*//工具箱
        //保存图片
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },*/
        //图例-每一条数据的名字叫销量
        legend:{
            data:['销量']
        },
        //x轴
        xAxis:{
            data:["苹果","橘子","橙子","香蕉","菠萝","榴莲"]
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis:{},
        //数据-data是最终要显示的数据
        series:[{
            name:'销量',
            type:'line',
            data:[40,20,35,60,55,10]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart5.setOption(option2);
    
    
    
});